import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  FlatList,
} from 'react-native';
import PropTypes from 'prop-types';
import LinearGradient from 'react-native-linear-gradient';
import {CachedImage} from 'react-native-img-cache';

const styles = StyleSheet.create({
  container: {
    // height: 115,
    paddingLeft: 20,
    paddingRight: 20,
    paddingBottom: 0,
    position: 'relative',
    paddingTop: 8,
  },
  descrptionText: {
    color: 'white',
    textAlign: 'left',
  },
});

export default class Home extends Component {
  static propTypes = {
    auction: PropTypes.object,
    onPressItem: PropTypes.func,
    swapSymbol: PropTypes.string,
  };

  render() {
    let {
      img,
      name,
      leftTime,
      status,
      startPrice,
      bidValue,
      payCoin,
      dealPrice,
      verifying,
    } = this.props.auction;

    return (
      <TouchableOpacity
        {...this.props}
        style={styles.container}
        onPress={this.props.onPressItem}
        key={name}>
        <LinearGradient
          start={{x: 0, y: 1}}
          end={{x: 1, y: 1}}
          colors={['#CE18EC', '#6601F5']}
          style={{
            borderRadius: 18,
            flexDirection: 'row',
            padding: 2,
          }}>
          <View
            style={{
              flex: 1,
              backgroundColor: '#2B085E',
              padding: 15,
              paddingRight: 5,
              borderRadius: 18,
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}>
            <CachedImage
              source={{uri: img}}
              cache={'force-cache'}
              style={{
                width: 80,
                height: 80,
                borderRadius: 10,
                backgroundColor: 'lightGray',
                marginRight: 10,
                marginLeft: 0,
                backgroundColor: 'rgba(220,220,220,1)',
              }}></CachedImage>
            <View
              style={{
                height: 80,
                width: 100,
                flexDirection: 'column',
                justifyContent: 'space-between',
                paddingTop: 5,
                paddingBottom: 5,
              }}>
              <Text
                style={[styles.descrptionText, {marginBottom: 5}]}
                numberOfLines={2}
                ellipsizeMode="tail">
                {name}
              </Text>
              <View>
                <Text style={{fontSize: 12, color: 'white'}}>
                  {bidValue == 0 ? 'Min Bid' : 'Latest Price'}
                </Text>
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'flex-end',
                    marginTop: 5,
                    // height: 20,
                  }}>
                  <Text
                    style={{
                      fontSize: 18,
                      color: 'white',
                      fontWeight: 'bold',
                      // height: 20,
                    }}>
                    {status == 0
                      ? bidValue != 0
                        ? bidValue
                        : startPrice
                      : bidValue != 0
                      ? bidValue
                      : dealPrice}
                  </Text>
                  <Text
                    style={{
                      fontSize: 12,
                      // height: 12,
                      color: 'white',
                      marginBottom: 2,
                    }}>
                    {' ' + payCoin}
                  </Text>
                </View>
              </View>
            </View>
            <View
              style={{
                flex: 1,
                height: 80,
                justifyContent: 'flex-end',
                alignItems: 'flex-end',
              }}>
              <LinearGradient
                start={{x: 0, y: 1}}
                end={{x: 1, y: 1}}
                colors={['#CE18EC', '#6601F5']}
                style={{
                  paddingRight: 5,
                  height: 26,
                  borderRadius: 13,
                  flexDirection: 'row',
                  alignItems: 'center',
                }}>
                <Image
                  style={{width: 20, height: 20, marginLeft: 10}}
                  source={require('../../../assets/home/time.png')}
                />
                <Text style={{color: 'white', marginLeft: 5, marginRight: 10}}>
                  {verifying == 0
                    ? 'In Review'
                    : status == 0
                    ? leftTime + ' left'
                    : 'Auctionable'}
                </Text>
              </LinearGradient>
            </View>
          </View>
        </LinearGradient>
        {startPrice == bidValue ? (
          <Image
            style={{position: 'absolute', right: 50, top: 0}}
            source={require('../../../assets/home/auction_tag.png')}></Image>
        ) : (
          <Image
            style={{position: 'absolute', right: 50, top: 0}}
            source={require('../../../assets/home/auction_tag_top.png')}></Image>
        )}
      </TouchableOpacity>
    );
  }
}
